{% extends "base.html" %}

{# 页面标题和页内标题现在显示 display_id_name #}
{% block title %}历史数据 - {{ display_id_name }}{% endblock %}
{% block page_title %}卡号: {{ display_id_name }} 的历史消息{% endblock %}

{% block content %}
    {# 移除 "返回首页" 按钮，因为 base.html 的导航栏已经提供了 "首页" 链接 #}
    {# <div class="button-group" style="margin-bottom: 20px;">
        <a href="{{ url_for('index') }}" class="button">返回首页</a>
    </div> #}

    <div class="search-controls" style="grid-template-columns: 1fr; align-items: stretch;">
        <div>
            <label for="historySearchQuery">历史消息搜索</label>
            <input type="text" id="historySearchQuery" placeholder="搜索 ID、定位时间、经纬度、自定义数据、浮标标识名字等...">
        </div>
    </div>

    <div id="noHistorySearchResults" class="no-data-message" style="display: none;">
        未找到匹配的历史数据。请尝试调整搜索条件。
    </div>
    <div id="historyMessagesContainer">
        <!-- 历史消息卡片将在这里通过 JavaScript 渲染 -->
    </div>

    <script>
        console.log('--- Frontend Debugging Start: Script Loaded (history.html) ---');

        // Flask 传递过来的格式化后的历史消息数据
        const historicalMessages = {{ historical_messages | tojson }};
        // 从 URL 获取的初始搜索关键词
        const initialQuery = "{{ initial_query }}";
        // 从 Flask 传递过来的 display_id_name
        const currentDisplayIdName = "{{ display_id_name }}"; 

        const historySearchQueryInput = document.getElementById('historySearchQuery');
        const historyMessagesContainer = document.getElementById('historyMessagesContainer');
        const noHistorySearchResultsDiv = document.getElementById('noHistorySearchResults');

        // 辅助函数：判断消息是否匹配搜索查询 (与 index.html 中的逻辑保持一致)
        function messageMatchesQuery(msg, query) {
            if (!query) return true;

            const lowerCaseQuery = query.toLowerCase();

            // 检查原始 ID Number
            if (String(msg['IdNumber']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查显示 ID 名称
            if (String(msg['display_id_name']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查 MessageId
            if (String(msg['MessageId']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查接收时间
            if (String(msg['接收时间']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查定位时间
            if (String(msg['定位时间']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查纬度
            if (String(msg['纬度']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查经度
            if (String(msg['经度']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查高程
            if (String(msg['高程']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查自定义数据
            if (String(msg['自定义数据']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查浮标标识名字
            if (String(msg['浮标标识名字']).toLowerCase().includes(lowerCaseQuery)) return true;
            // 检查原始POST数据
            if (msg['raw_post_data_json'] && String(msg['raw_post_data_json']).toLowerCase().includes(lowerCaseQuery)) return true;

            return false;
        }

        // 渲染历史消息的函数
        function renderHistoryMessages() {
            console.log('--- renderHistoryMessages called (history.html) ---');
            const query = historySearchQueryInput.value.trim(); // 保留原始query用于高亮
            const lowerCaseQuery = query.toLowerCase();
            
            // 历史页面，默认所有卡片都展开
            const shouldExpandCards = true; 

            let filteredMessages = [];
            if (!query) {
                // 如果没有搜索词，则显示所有历史消息
                filteredMessages = historicalMessages;
            } else {
                // 根据搜索词过滤消息
                historicalMessages.forEach(msg => {
                    if (messageMatchesQuery(msg, lowerCaseQuery)) {
                        filteredMessages.push(msg);
                    }
                });
            }

            historyMessagesContainer.innerHTML = '';
            if (filteredMessages.length === 0) {
                noHistorySearchResultsDiv.style.display = 'block';
            } else {
                noHistorySearchResultsDiv.style.display = 'none';
                // 按照接收时间倒序排列 (历史数据通常是这样显示)
                filteredMessages.sort((a, b) => new Date(b['接收时间']) - new Date(a['接收时间']));

                filteredMessages.forEach(msg => {
                    // 调用 base.html 中定义的通用函数
                    const cardHtml = createMessageCardHtml(
                        msg['IdNumber'],      // 原始 ID Number
                        msg,                  // 格式化后的消息数据对象
                        query,                // 搜索关键词用于高亮
                        shouldExpandCards,    // 默认展开
                        true,                 // 标记为历史视图 (这将禁用“查看历史”按钮)
                        historicalMessages.length // 传递该ID的总消息数 (虽然在这里不显示“查看历史”，但保持一致性)
                    );
                    historyMessagesContainer.innerHTML += cardHtml;
                });
                bindCardToggleEvents(); // 重新绑定消息卡片的折叠事件
            }
        }

        // 监听搜索框输入
        historySearchQueryInput.addEventListener('input', renderHistoryMessages);

        // 页面加载完成时执行
        document.addEventListener('DOMContentLoaded', () => {
            // 如果有初始搜索关键词，填充搜索框
            if (initialQuery) {
                historySearchQueryInput.value = initialQuery;
            }
            // 首次渲染历史消息
            renderHistoryMessages();
        });
    </script>
{% endblock %}
